<template>
  <div class="article">
    <van-skeleton
      title
      avatar
      row="10"
      style="margin-top: 20rpx"
      :loading="loading"
    >
      <div class="article-head">
        <van-image
          round
          width="71rpx"
          height="71rpx"
          :src="avatar"
          style="float: left"
        />
        <div style="padding-left: 5rpx">
          <div class="name">{{ username }}</div>
          <div class="date">
            {{ updatedAt.slice(0, 10) + " " + (parseInt(updatedAt.slice(11, 12)) + 8) + updatedAt.slice(13, 19) }}
          </div>
        </div>
      </div>
      <div class="article-content">
        {{ content }}
      </div>
      <div style="margin: 10rpx">
        <van-image
          width="90"
          height="90"
          v-for="(item, index) in imgList"
          :key="index"
          :src="item.url"
          @click="previewImage(index)"
        />
      </div>
      <div style="padding-left: 55%">
        <van-button
          @click="addLike()"
          class="article-button"
          size="small"
          icon="good-job-o"
          >点赞</van-button
        >
        <van-button
          @click="addComment()"
          style="margin-left: 25rpx"
          class="article-button"
          size="small"
          icon="chat-o"
          >评论</van-button
        >
      </div>
      <div class="article-like">
        <div wx:v-if="update">{{ likeNum }}人觉得很赞</div>
      </div>
      <div wx:v-if="update">
        <div
          v-for="(item, index) in commentList"
          :key="index"
          class="article-comment"
        >
          {{ commentUserList[index] }}:{{ item.content }}
        </div>
      </div>
      <div style="padding: 10rpx" @click="addComment()">
        <div class="article-commentBox">评论</div>
      </div>
    </van-skeleton>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      avatar: "",
      username: "",
      updatedAt: this.article.updatedAt,
      content: this.article.content,
      imgList: this.article.image_address,
      likeNum: this.article.like,
      commentList: [],
      commentUserList: [],
      loading: true,
      update: true,
    };
  },
  props: ["article"],
  methods: {
    //点赞
    addLike() {
      
      this.wyhhyjrequest
        .run("addLike", { a_id: this.article.a_id, u_id: this.$parent._id })
        .then((res) => {
          if (res.result == true) this.likeNum += 1;
          else this.likeNum -= 1;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加评论
    addComment() {
      this.$parent.showPopup(this);
    },
    //更新评论
    async updateComment() {
      await this.getComment();
      for (let element of this.commentList) {
        await this.getCommentUserName(element);
      }
    },
    //刷新
    reload() {
      this.update = false;
      this.$nextTick(() => {
        this.update = true;
      });
    },
    //获取评论用户名
    async getCommentUserName(element) {
      const res = await this.wyhhyjrequest.run("getUser", { _id: element.u_id });
      this.commentUserList.push(res.result.username);
    },
    //获取文章评论
    async getComment() {
      const res = await this.wyhhyjrequest.run("getComment", {
        a_id: this.article.a_id,
      });
      this.commentList = res.result;
    },

    //图片预览
    previewImage(index) {
      let imgs = this.imgList.map((item) => {
        return item.url;
      });
      //uniapp预览轮播图
      uni.previewImage({
        urls: imgs,
        current: index,
      });
    },
  },
  async created() {
      console.log("==========",this.article.u_id)
    //获取该文章作者的信息
    this.wyhhyjrequest
      .run("getUser", { _id: this.article.u_id })
      .then((res) => {
          console.log(res)
        this.username = res.result.username;
        this.avatar = res.result.avatarUrl;
        this.loading = false;
      })
      .catch((err) => {
        console.log(err);
      });

    //获取文章评论
    await this.getComment();
    for (let element of this.commentList) {
      await this.getCommentUserName(element);
    }
  },
  onReady() {
    this.loading = true;
  },
};
</script>

<style>
.article {
  width: 710rpx;
  background-color: white;
  border-radius: 20rpx;
}

.article-head {
  padding: 10rpx;
}

.name {
  display: flex;
  font-size: 30rpx;
}

.date {
  display: flex;
  font-size: 20rpx;
  margin-top: 8rpx;
}

.article-content {
  font-size: 30rpx;
  margin-top: 10rpx;
  padding: 10rpx;
}

.article-button {
  size: mini;
}

.article-like {
  display: flex;
  font-size: 30rpx;
  padding: 20rpx;
}

.article-comment {
  font-size: 30rpx;
  padding-left: 15rpx;
  padding-right: 15rpx;
  margin-top: 2rpx;
  margin-bottom: 3rpx;
}

.article-commentBox {
  color: #a4a4a4;
  height: 100%;
  background-color: #f2f2f2;
  font-size: 30rpx;
  padding: 5rpx;
  border-radius: 10rpx;
}
</style>